<template>
  <div class="page">
    <el-card class="form-card">
      <template #header>
        <div class="card-header">
          <el-icon><DocumentAdd /></el-icon>
          <span>提交工单</span>
        </div>
      </template>
      
      <el-form 
        ref="formRef" 
        :model="form" 
        :rules="rules" 
        label-width="80px"
        @submit.prevent="handleSubmit"
      >
        <el-form-item label="标题" prop="title">
          <el-input 
            v-model="form.title" 
            placeholder="简要描述问题"
            clearable
          />
        </el-form-item>
        
        <el-form-item label="描述" prop="description">
          <el-input 
            v-model="form.description" 
            type="textarea" 
            :rows="6"
            placeholder="详细描述遇到的问题"
            show-word-limit
            maxlength="500"
          />
        </el-form-item>
        
        <el-form-item label="优先级" prop="priority">
          <el-select v-model="form.priority" placeholder="请选择优先级">
            <el-option label="低" value="LOW" />
            <el-option label="中" value="MEDIUM" />
            <el-option label="高" value="HIGH" />
            <el-option label="紧急" value="URGENT" />
          </el-select>
        </el-form-item>
        
        <el-form-item label="分类" prop="categoryId">
          <el-select v-model="form.categoryId" placeholder="请选择问题分类">
            <el-option label="技术问题" :value="1" />
            <el-option label="功能问题" :value="2" />
            <el-option label="性能问题" :value="3" />
            <el-option label="其他" :value="4" />
          </el-select>
        </el-form-item>
        
        <el-form-item label="附件">
          <FileUpload 
            v-model="form.attachments"
            :limit="5"
            :max-size="10 * 1024 * 1024"
            upload-text="选择文件"
            upload-tip="支持图片、文档等格式，单个文件不超过10MB，最多5个文件"
            @change="handleAttachmentChange"
          />
        </el-form-item>
        
        <el-form-item>
          <el-button 
            type="primary" 
            @click="handleSubmit"
            :loading="loading"
            :disabled="loading"
          >
            <el-icon><Check /></el-icon>
            提交工单
          </el-button>
          <el-button @click="resetForm">
            <el-icon><Refresh /></el-icon>
            重置
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { ref, reactive } from 'vue'
import { useTicketsStore } from '../store/tickets'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import FileUpload from '../components/FileUpload.vue'

export default {
  name: 'TicketSubmit',
  components: {
    FileUpload
  },
  setup() {
    const formRef = ref()
    const loading = ref(false)
    const router = useRouter()
    const ticketsStore = useTicketsStore()

    const form = reactive({
      title: '',
      description: '',
      priority: 'MEDIUM',
      categoryId: 1,  // 默认为技术问题
      attachments: []
    })

    const rules = {
      title: [
        { required: true, message: '请输入工单标题', trigger: 'blur' },
        { min: 5, max: 100, message: '标题长度在 5 到 100 个字符', trigger: 'blur' }
      ],
      description: [
        { required: true, message: '请输入问题描述', trigger: 'blur' },
        { min: 10, max: 500, message: '描述长度在 10 到 500 个字符', trigger: 'blur' }
      ],
      priority: [
        { required: true, message: '请选择优先级', trigger: 'change' }
      ],
      categoryId: [
        { required: true, message: '请选择问题分类', trigger: 'change' }
      ]
    }

    const handleSubmit = async () => {
      if (!formRef.value) return
      
      try {
        const valid = await formRef.value.validate()
        if (!valid) return

        loading.value = true
        await ticketsStore.createTicket(form)
        
        ElMessage.success('工单提交成功！')
        
        // 询问是否查看工单列表
        try {
          await ElMessageBox.confirm('工单已提交成功，是否查看工单列表？', '提交成功', {
            confirmButtonText: '查看列表',
            cancelButtonText: '继续提交',
            type: 'success'
          })
          router.push('/tickets')
        } catch {
          // 用户选择继续提交，重置表单
          resetForm()
        }
      } catch (error) {
        ElMessage.error('提交失败：' + (error.message || '未知错误'))
      } finally {
        loading.value = false
      }
    }

    const handleAttachmentChange = (files) => {
      console.log('附件变化:', files)
    }

    const resetForm = () => {
      if (!formRef.value) return
      formRef.value.resetFields()
      Object.assign(form, {
        title: '',
        description: '',
        priority: 'medium',
        category: 'system',
        attachments: []
      })
    }

    return { 
      formRef, 
      form, 
      rules, 
      loading, 
      handleSubmit, 
      handleAttachmentChange,
      resetForm 
    }
  }
}
</script>

<style scoped>
.page { 
  max-width: 800px; 
  margin: 0 auto; 
  padding: 20px;
}

.form-card {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  font-weight: 600;
}

.el-form {
  margin-top: 20px;
}

.el-form-item {
  margin-bottom: 24px;
}

.el-button {
  margin-right: 12px;
}
</style>


